<template>
	<view class="withdralDetail"  v-if="user">
		<view class="cf-image">
			<image src="/static/images/withdraw-image.png" class="withdraw-image"  mode=""></image>
		</view>
		<view class="all">全部佣金¥{{user.dividend_all}}</view>
		<view class="can">可提现金额¥{{user.dividend_brokerage}}</view>
		<view class="desc">每月27日自动结算上个自然月的总收益到可提现金额 每月27～31日全天可提现</view>
		<view class="transfer-balance" @click='transferToBalance()'>转入到余额（免手续费）</view>
		<view class="transfer-bank"  @click='goMyWithdraw()'>提现到银行卡</view>
		<view class="progress">
			<view>提现进度</view>
			<image src="/static/images/right-black-icon.png"  mode="" class="right"></image>
		</view>
	</view>	
</template>

<script>
	import store from "store"
	import {mapGetters,mapMutations} from 'vuex'
	import { getUserBrokerages,getUser } from "api/userApi"
	import { getBrokeragesTotal,transferToBalance } from "api/brokerageApi"
	export default {
		store,
		computed:{
			...mapGetters([
				'user',
				'isLogin'
			])
		},
		data(){
			return {
				'total':0,
			}
		},
	
		methods:{
			...mapMutations([
				'setUser',
				'setStatusBar'
			]),
			goMyWithdraw() {
				
			  uni.navigateTo({url: `/packs/pages/withdrawal/withdrawal`})
			},
			async getUser(){
				let response =  await getUser()
				this.setUser(response)
			},
			async transferToBalance() {
				
				uni.showModal({
				  title: '确认转入到余额？',
				  content: '转入到余额后不可撤回，不可提现。余额可用于购买平台商品使用',
				  success: async (res) => {
					  if(res.confirm){
						  
						 const response =  await transferToBalance()
						 if(!response.message){
						 	   uni.showToast({title: '转入余额成功', duration: 2000, icon: 'success'});
						 }else{
						 	uni.showModal({
						 		title:'提示',
						 		content:Object.values(response.errors)[0][0],
						 		confirmText:'知道了',
						 		confirmColor:'#FF6011',
						 		showCancel:false
						 	})
						 }
					  }
					  
					  
				     
				    
				  }
				})
			
			},
			
			async getBrokeragesTotal(){
				let response =  await getBrokeragesTotal();
				this.total = response.total;
				
			},
			
			back(){
				uni.navigateBack()
				
			}
		},
		async onShow() {
			if(await this.isLogin){
				await this.getUser();
				//await this.getBrokeragesTotal()
				
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.withdralDetail{
		min-height:90vh;
		position: relative;
		background: #F6F6F6; 
		width:100%;
		text-align:center;
	}
	.cf-image{
		width:100%;
		text-align:center;
		.withdraw-image{
			
			width:156rpx;
			height:122rpx;
			margin:112rpx auto 0rpx;
		}
	}
	.all{
		margin-top:16rpx;
		font-size:32rpx;
		font-weight:600
		
	}
	.can{
		margin-top:16rpx;
		font-size:32rpx;
		font-weight:600
		
	}
	.desc{
		font-size:26rpx;
		color:#999;
		width:600rpx;
		margin: 16rpx auto 0;
		line-height:42rpx;
		
	}
	.transfer-balance{
		background:#EF8235;
		color:#fff;
		width:506rpx;
		height:100rpx;
		margin:66rpx auto 0rpx;
		font-size:32rpx;
		font-weight:600;
		line-height:100rpx;
		border-radius:10rpx;
		
	}
	.transfer-bank{
		background:#999;
		color:#fff;
		width:506rpx;
		height:100rpx;
		margin:40rpx auto 0rpx;
		font-size:32rpx;
		font-weight:600;
		line-height:100rpx;
		border-radius:10rpx;
		
	}
	.progress{
		width:718rpx;
		height:98rpx;
		line-height:98rpx;
		text-align:left;
		margin:76rpx auto;
		background:#fff;
		overflow:hidden;
		border-raidus:4rpx;
		>view{
			color:#333;
			font-size:30rpx;
			margin-left:12rpx;
			float:left;
		}
		.right{
			float:right;
			width:16rpx;
			height:22rpx;
			margin-top:38rpx;
			margin-right:12rpx;
		}
	}
	
	
</style>